<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="keywords" content="Aceona,Aceona.com,人脉俱乐部,精英互荐,猎手,猎寻,千猎千寻,马球俱乐部,高端人才猎头,高薪职位猎头,中高层管理人员猎头,高薪职位,世界500强职位, 知名企业招聘,中高端人才招聘,高薪工作,高收入工作,外企招聘,人才推荐奖金" />
<meta name="description" content="埃斯欧纳信息咨询有限公司,Aceona.com,为中高端人才提供优质的工作机会和良好的事业发展机遇，提供搜索职位、投简历、猎头服务等求职服务，帮求者找到知名企业和高薪工作。为招聘企业提供职位发布,高级人才的搜寻,推荐,猎头等服务" />
<meta name="company" content="深圳埃斯欧纳人力资源有限公司,Aceona.com"/>
<meta content="本页版权归Aceona所有。All Rights Reserved" name="copyright" />
<meta name="robots" content="index,follow" />
<meta content="aceona,Aceona.com,红桃网" name="author" />
<meta content="Dreamweaver" name="Generator" />
<meta content="本页版权归Aceona所有。All Rights Reserved" name="copyright" />
<title>aceona圈子转让</title>
<link rel="stylesheet" href="http://static.aceona.com/app_css/global.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://static.aceona.com/app_css/app_layout.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://static.aceona.com/app_css/app_form_v2.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://static.aceona.com/api_demo/css/api_common.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://static.aceona.com/app_js/app_widgets/themes/default/monthPicker.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="http://static.aceona.com/app_js/jquery.js"></script>
<script type="text/javascript" src="http://static.aceona.com/app_js/app_widgets/app_widgets_monthpicker.js"></script>
<script type="text/javascript">
	$(function(){
		$("#year").focus(function(){
			$(this).monthpicker({
				elements: [{
		            tpl: 'year',
		            opt:{
		            	value:2012
		            }
		        }]
			},function(){
				 $("#month").trigger("focus");
			});
		});	
		$("#month").focus(function(){
			$(this).monthpicker({
				elements: [{
		            tpl: 'month',
		            opt:{
		            	value:2012
		            }
		        }]
			},function(){
				$("#quarter").trigger("focus");
			});
		});	
		$("#quarter").focus(function(){
			$(this).monthpicker({
				elements: [{
		            tpl: 'quarter',
		            opt:{
		            	value:2012
		            }
		        }]
			},function(){
				//alert("我是回调哦");
			});
		});	
		/*$("#example_2").monthpicker("1995-12",callback);
		$("#example_3").monthpicker({
			elements: [
				{tpl:"month",opt:{
					value: 1
				}},
				{tpl:"year",opt:{
					range: "-10~5",
					value: 2007
				}}
			],
			onChanged: callback
		});
		$("#example_4").monthpicker({
			elements: [
				{tpl:"year",opt:{
					range: "-10~2",
					value: 2005
				}},
				{tpl:"quarter"}
			],
			onChanged: callback
		});
		*/
	});

	
function callback(data,$e){
	var str = "";
	for(key in data) {
		str += " " + key + ": " + data[key]+ "; ";
	}
	
	var selector = "#message_" + $e.attr('id');
	$(selector).prepend("{" + str + "};<br />").show();
}
	
</script>
</head>
<body>
	<!--dom bec-->
	
	<div class="ace_widgets_mod ace_widgets_monthPicker app_radius_3 w_240">
		 <div class="bd_in">
		 	<div class="hd tac">
		 		<a href="javascript:void(0)" title="向上翻" class="widgets_icon_larrow icon">&nbsp;</a>
		 		<span class="select_title">请选择年份</span>
		 		<a href="javascript:void(0)" title="向下翻" class="widgets_icon_rarrow icon">&nbsp;</a>
		 	</div>
		 	<div class="bd">
		 		<ul class="option_list c">
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 			<li><a href="" class="app_radius_3">2000</a></li>
		 		</ul>
		 	</div>
		 	<div class="fd">
		 		<a href="javascript:void(0)" class="a_blue_d" title="[清空]" id="J_yearMonth_clear">[清空]</a>
		 		<a href="javascript:void(0)" class="a_blue_d"  title="[关闭]">[关闭]</a>
		 	</div>
		 </div>
	</div>
	
	<!--dom end-->
	<table width="100%" cellspacing="0" cellpadding="0" border="0" class="app_table_b">
		 <tbody>
		 	<tr>
			    <th width="200">组件名：</th>
			   <td>年月选取组件 MonthPicker</td>
	       </tr>
		 	<tr>
			    <th width="200">依赖文件：</th>
			   <td>Peter</td>
	       </tr>
	       <tr>
			  	<th>直接包含css,js文件调用示例:</th>
			    <td class="tal"> 请选择：<input type="text" id="year"  class="app_input_a_v2 w_100" /><span class="m_lr_12">年</span><input type="text" id="month"  class="app_input_a_v2 w_100" />月 <input type="text" id="quarter"  class="app_input_a_v2 w_100" />季度
                </td>
	       </tr>
		 	<tr>
			    <th>author</th>
			   <td>Peter</td>
	       </tr>
		   <tr>
			  	<th>参数说明:</th>
			    <td class="tal">
			    	<h1>
			    		elements: [{
				            tpl: 'year'
				        },{
				            tpl: 'month'
				        },{
				            tpl: 'quarter'
				        }],				   </h1>
			    	<p>数据模板参数：</p>
			    	<blockquote>var templates = jQuery.extend({<br />
			year: {<br />
			key: 'year',<br />
			type: 'dropdown',<br />
			caption: '请选择年份',<br />
			range: '-11~0',<br />
			value: new Date().getFullYear()<br />
			},<br />
			month: {<br />
			key: 'month',<br />
			type: 'button',<br />
			caption: '请选择月份',<br />
			text: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],<br />
			range: '1~12',<br />
			value: new Date().getMonth() + 1<br />
			},<br />
			quarter: {<br />
			key: 'quarter',<br />
			type: 'button',<br />
			caption: '请选择季度',<br />
			text: ['1季度', '2季度', '3季度', '4季度'],<br />
			range: '1~4',<br />
			value: 1<br />
			}<br />
			}, opts.templates);</blockquote>
			    	<h2 class="f_b">选年:</h2>
			    	<blockquote>
					  $(&quot;#year&quot;).focus(function(){<br />
			    	    $(this).monthpicker({<br />
			    	    elements: [{<br />
			    	    tpl: 'year'<br />
			    	    }]<br />
			    	    },function(){<br />
			    	      alert(&quot;我是回调哦&quot;);<br />
			    	    });<br />
			    	    });
    	     </blockquote></td>
	       </tr>
	   </tbody>
	</table>
</body>
</html>